import { Sidebar } from '@/components/Sidebar';
import { CourseCard } from '@/components/CourseCard';
import { ProgressCircle } from '@/components/ProgressCircle';
import { CalendarWidget } from '@/components/CalendarWidget';
import { LessonCard } from '@/components/LessonCard';
import { mockCourses } from '@/data/courses';
import { Search, Bell, MessageSquare } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { useAuth } from '@/contexts/AuthContext';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const Index = () => {
  const { user, loading } = useAuth();
  const navigate = useNavigate();

  useEffect(() => {
    if (!loading && !user) {
      navigate('/auth');
    }
  }, [user, loading, navigate]);

  if (loading) {
    return <div className="min-h-screen flex items-center justify-center">Loading...</div>;
  }

  if (!user) {
    return null;
  }

  const userName = user.user_metadata?.full_name || user.email?.split('@')[0] || "User";
  const recentCourse = mockCourses[0];
  const upcomingLessons = mockCourses.flatMap(course => 
    course.lessons.filter(lesson => !lesson.completed).slice(0, 3)
  );

  const userProgress = {
    completedLessons: 10,
    upcomingLessons: 15,
    totalLessons: 20,
  };

  return (
    <div className="min-h-screen bg-background">
      <Sidebar />
      
      <div className="ml-20 min-h-screen">
        {/* Header */}
        <header className="sticky top-0 z-10 bg-background border-b border-border px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex-1 max-w-xl">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
                <Input 
                  placeholder="Search" 
                  className="pl-10"
                />
              </div>
            </div>
            <div className="flex items-center gap-4">
              <Button variant="ghost" size="icon">
                <Bell className="w-5 h-5" />
              </Button>
              <Button variant="ghost" size="icon">
                <MessageSquare className="w-5 h-5" />
              </Button>
              <Avatar>
                <AvatarImage src="/placeholder.svg" />
                <AvatarFallback>TD</AvatarFallback>
              </Avatar>
            </div>
          </div>
        </header>

        {/* Main Content */}
        <main className="px-8 py-8">
          <div className="mb-8">
            <p className="text-muted-foreground mb-2">Hello, {userName}!</p>
            <h1 className="text-3xl font-bold">What do you want to learn today?</h1>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Left Column */}
            <div className="lg:col-span-2 space-y-8">
              {/* Recent Learning */}
              <section>
                <h2 className="text-xl font-semibold mb-4">Recent Learning</h2>
                <CourseCard course={recentCourse} featured />
              </section>

              {/* Progress Statistics */}
              <section>
                <h2 className="text-xl font-semibold mb-4">Progress Statistics</h2>
                <div className="grid grid-cols-3 gap-6 bg-card rounded-lg p-8 border border-border">
                  <ProgressCircle 
                    value={userProgress.completedLessons} 
                    max={userProgress.totalLessons} 
                    label="Lessons" 
                  />
                  <ProgressCircle 
                    value={userProgress.upcomingLessons} 
                    max={20} 
                    label="Upcoming" 
                  />
                  <ProgressCircle 
                    value={userProgress.totalLessons} 
                    max={25} 
                    label="Lessons" 
                  />
                </div>
              </section>

              {/* Upcoming Lessons */}
              <section>
                <h2 className="text-xl font-semibold mb-4">Upcoming Lessons</h2>
                <div className="grid gap-4">
                  {upcomingLessons.map((lesson) => (
                    <LessonCard 
                      key={lesson.id} 
                      lesson={lesson} 
                      courseId={lesson.courseId}
                    />
                  ))}
                </div>
              </section>
            </div>

            {/* Right Column */}
            <div className="space-y-8">
              <CalendarWidget />
            </div>
          </div>
        </main>
      </div>
    </div>
  );
};

export default Index;